<template>
  <div class="app-container">
    <div class="innerwrapper flex" style="height: 100%;">
      <div class="sidebar">
        <el-menu
          :default-active="activeMenu"
          background-color="#fff"
          text-color="#000"
          :unique-opened="true"
          active-text-color="#fff"
          :collapse-transition="false"
          mode="vertical"
          router
        >
          <el-menu-item
            v-for="(route, index) in sidebarRouters"
            :key="index"
            :index="route.path"
          >
          <svg-icon :icon-class='route.meta.icon' class="mr_10"/>
          {{ route.meta.title }}
            <!-- <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" /> -->
          </el-menu-item>
        </el-menu>
      </div>
      <div class="main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sidebarRouters: [],
    };
  },
  created() {
    this.sidebarRouters =
      this.$router.options.routes[2].children[2].children.filter(item=>!item.hidden);
  },
  computed: {
    activeMenu() {
      const route = this.$route;
      console.log('route:',route)
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu.substring(meta.activeMenu.lastIndexOf("/") + 1, meta.activeMenu.length);
      }
      return path.substring(path.lastIndexOf("/") + 1, path.length);
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  height: 100vh;
  background-color: #fafafa;
}
.sidebar {
  margin-top: 20px;
  width: 200px;
  height: calc(100% - 20px);
  background-color: white;
}
.el-menu{
    border-right: 0;
}
.sidebar{
  .el-menu-item.is-active{
    background: linear-gradient(90deg, #5877FF 0%, #587EF8 100%);;
  }
}
.main{
    padding: 20px 20px 0;
    width: calc(100% - 200px);
    height: calc(100vh - 68px);
    // transition: margin-left .28s;
    // margin-left: 200px;
    position: relative;
    background-color: #FAFAFA;
}
</style>